<template>
  <div>
    <!-- 加载中提示，请求接口时显示 -->
    <div v-if="loading" class="loading-mask">
      <div class="loading-content">加载中...</div>
    </div>
    <h1>中国新闻网</h1>
    <!-- 新闻列表 -->
    <div>
      <h2>新闻列表</h2>
      <div>
        <button @click="changPage(1)" :disabled="currentPage === 1">
          首页
        </button>
        <button
          @click="changPage(currentPage - 1)"
          :disabled="currentPage === 1"
        >
          上一页
        </button>
        <span>当前页:{{ currentPage }} / 总页数:{{ totalPage }}</span>
        <button
          @click="changPage(currentPage + 1)"
          :disabled="currentPage === totalPage"
        >
          下一页
        </button>
        <button
          @click="changPage(totalPage)"
          :disabled="currentPage === totalPage"
        >
          尾页
        </button>
        <input
          type="number"
          v-model.number="pageSize"
          @change="handlePageSizeChange"
          min="1"
          placeholder="每页条数"
        />
      </div>
    </div>

    <!-- 新闻表格 -->
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>标题</th>
          <th>内容</th>
          <th>作者</th>
          <th>类型</th>
          <th>创建时间</th>
          <th>点赞数</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="news in newsList" :key="news.id">
          <td>{{ news.id }}</td>
          <td>{{ news.titles }}</td>
          <td>{{ news.contents.slice(0, 20) }}...</td>
          <td>{{ news.username }}</td>
          <td>
            <span v-if="news.type === 1">娱乐</span>
            <span v-if="news.type === 2">军事</span>
            <span v-if="news.type === 3">体育</span>
          </td>
          <td>{{ news.cretatime }}</td>
          <td>
            {{ news.num }}
            <!-- 点赞 -->
            <button @click="handleLike(news.id)">点赞</button>
          </td>
          <td>
            <button @click="handleViewDetail(news.id)">查看</button>
            <button @click="handleDelete(news.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 添加新闻 -->
    <div>
      <h2>添加新闻</h2>
      <form @submit.prevent="handleAddNews">
        <div>
          标题:
          <input type="text" v-model="newsForm.titles" />
        </div>
        <div>
          内容:
          <textarea v-model="newsForm.contents" rows="3"></textarea>
        </div>
        <div>作者: <input type="text" v-model="newsForm.username" /></div>
        <div>
          类型:
          <select v-model="newsForm.type">
            <option value="">请选择类型</option>
            <option value="1">娱乐</option>
            <option value="2">军事</option>
            <option value="3">体育</option>
          </select>
        </div>
        <div>创建时间: <input type="text" v-model="newsForm.cretatime" /></div>
        <div>
          点赞数: <input type="number" v-model.number="newsForm.num" min="0" />
        </div>
        <button type="submit">提交</button>
      </form>
    </div>
    <!-- 详情弹窗 -->
    <div v-if="showDetail" class="detail-mask">
      <div class="detail-dialog">
        <h3>新闻详情</h3>
        <span @click="showDetail = false" class="close-btn">关闭</span>
        <p>内容: {{ detailData.contents }}</p>
        <p>作者: {{ detailData.username }}</p>
        <p>
          类型: <span v-if="detailData.type === 1">娱乐</span>
          <span v-if="detailData.type === 2">军事</span>
          <span v-if="detailData.type === 3">体育</span>
        </p>
        <p>创建时间: {{ detailData.cretatime }}</p>
        <p>点赞数: {{ detailData.num }}</p>
      </div>
    </div>
  </div>
</template>

<script>
// 引入接口方法，确保 @/utils/https.js 正确配置了 axios 请求
import {
  addNews,
  deletNews,
  getNewList,
  getNewsDetail,
  likeNews,
} from "@/utils/https";

export default {
  name: "NewsNetwork",
  data() {
    return {
      newsList: [], // 新闻列表，统一变量名
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页条数
      totalPage: 1, // 总页数
      // 新增表单数据
      newsForm: {
        titles: "",
        contents: "",
        username: "",
        type: "",
        cretatime: "",
        num: 0,
      },
      showDetail: false, // 控制是否显示详情弹窗
      detailData: {}, // 详情数据
      loading: false, // 加载状态，控制加载中提示
    };
  },
  mounted() {
    // 页面加载时获取新闻列表
    this.loadNewsList();
  },
  methods: {
    // 获取新闻列表
    loadNewsList() {
      this.loading = true; // 开始请求，显示加载中
      getNewList({ page: this.currentPage, pagelimit: this.pageSize })
        .then((res) => {
          this.newsList = res.data.data;
          this.totalPage = res.data.allpage;
        })
        .catch((err) => {
          this.$message.error("获取列表失败：" + err); // 假设用了消息提示组件，可替换成 alert 或其他
        })
        .finally(() => {
          this.loading = false; // 请求结束，隐藏加载中
        });
    },
    // 切换页码
    changPage(page) {
      if (page < 1 || page > this.totalPage) return;
      this.currentPage = page;
      this.loadNewsList();
    },
    // 改变每页条数
    handlePageSizeChange() {
      this.currentPage = 1; // 重置页码到第一页
      this.loadNewsList();
    },
    // 添加新闻
    handleAddNews() {
      console.log({
        titles: this.newsForm.titles,
        contents: this.newsForm.contents,
        username: this.newsForm.username,
        type: this.newsForm.type,
        cretatime: this.newsForm.cretatime,
        num: 0,
      });

      //   this.loading = true;
      addNews({
        titles: this.newsForm.titles,
        contents: this.newsForm.contents,
        username: this.newsForm.username,
        type: this.newsForm.type,
        cretatime: this.newsForm.cretatime,
        num: 0,
      })
        .then((val) => {
          console.log(val);

          this.$message.success("添加成功");
          // 重置表单
          //   this.newsForm = {
          //     titles: "",
          //     contents: "",
          //     username: "",
          //     type: "",
          //     cretatime: "",
          //     num: 0,
          //   };
          this.loadNewsList();
        })

        .catch((err) => {
          //   this.$message.error("添加失败：" + err);
          console.log(err);
        });
      // .finally(() => {
      //   this.loading = false;
      // });
    },
    // 删除新闻
    handleDelete(id) {
      
      if (confirm("确定要删除这条新闻么?")) {
        
        this.loading = true;
        deletNews(id) // 修正传参方式
          .then(() => {
            alert("删除成功!"); // 替换$message
            this.loadNewsList();
          })
          .catch((err) => {
            alert("删除失败：" + err.message);
          })
          .finally(() => {
            this.loading = false;
          });
          
      }
      
    },
    // 点赞
    handleLike(id) {
      this.loading = true;
      likeNews({ id })
        .then(() => {
          this.$message.success("点赞成功");
          this.loadNewsList();
        })
        .catch((err) => {
          this.$message.error("点赞失败：" + err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 查看详情
    handleViewDetail(id) {
      this.loading = true;
      getNewsDetail(id) // 修正传参方式
        .then((res) => {
          this.detailData = res.data;
          this.showDetail = true;
        })
        .catch((err) => {
          alert("获取详情失败：" + err.message); // 替换$message
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
/* 加载中遮罩样式 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.loading-content {
  font-size: 16px;
  color: #333;
}

/* 详情弹窗样式 */
.detail-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}
.detail-dialog {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  width: 500px;
  position: relative;
  z-index: 9999;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #999;
}
</style>
